<script lang="ts">
	import { currentTheme } from '$lib/stores/theme';
	import { onMount, onDestroy } from 'svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
	import { copyToClipboard } from '$lib/utils/clipboard/clipboard';
	import { getGlobalHighlighter, type SupportedTheme } from '$lib/utils/shiki/shiki-global';
	import type { Highlighter } from 'shiki';

	let {
		children,
		code,
		language = 'svelte'
	}: {
		children?: any;
		code: string;
		language?: string;
	} = $props();

	let theme: SupportedTheme = $state('github-light');
	let highlightedCode: string = $state('');
	let isActive = $state(false);
	let formatCode: string = $state('');
	let unsubscribeTheme: (() => void) | null = null;
	let highlighter: Awaited<Highlighter> | null = $state(null);

	onMount(async () => {
		formatCode = code.replaceAll('\t', '    ');
		highlighter = await getGlobalHighlighter();
		unsubscribeTheme = currentTheme.subscribe((value) => {
			theme = value === 'light' ? 'github-light' : 'github-dark';
		});
	});
	onDestroy(() => {
		if (unsubscribeTheme) unsubscribeTheme();
	});
	// 🔥 修复核心：$effect 回调返回 void，内部异步自执行
	$effect(() => {
		if (!highlighter || !formatCode) return;
		// 内部定义异步函数并立即执行，不影响 $effect 返回值
		// 用当前主题重新生成高亮HTML
		highlightedCode = highlighter.codeToHtml(formatCode, {
			lang: language,
			theme: theme // 使用最新的theme变量
		});
	});

	async function copyCode() {
		const success = await copyToClipboard(formatCode);
	}
</script>

<!-- 模板部分（保留加载状态提示，可选） -->
<div class="component-preview">
	<div class="preview-area">
		{@render children?.()}
	</div>

	<div>
		<div class="code-header">
			<RectButton
				icon="office/copy"
				variant="info"
				type="link"
				iconSize={15}
				style="height:26px;width:26px"
				onclick={copyCode}
			></RectButton>
			<RectButton
				icon="office/code"
				variant="info"
				type="link"
				iconSize={15}
				style="height:26px;width:26px"
				onclick={() => {
					isActive = !isActive;
				}}
			></RectButton>
		</div>
		<div class="code-content" class:isActive>
			<div class="code-content__container">
				<div class="hight-code">
					<div class="code-block">
						{@html highlightedCode}
					</div>
				</div>
				<div class="code-content__foot">
					<RectButton
						icon="office/code-off"
						label="隐藏代码"
						variant="primary"
						type="link"
						iconSize={13}
						style="height:26px;width:26px"
						onclick={() => {
							isActive = false;
						}}
					></RectButton>
				</div>
			</div>
		</div>
	</div>
</div>

<style scoped lang="scss">
	/* 样式保持不变，新增加载状态样式（可选） */
	.component-preview {
		border-radius: 6px;
		border: var(--border);
		overflow: hidden;
	}
	.preview-area {
		padding: 20px 20px 0 20px;
	}
	.code-header {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 6px 10px;
		border-top: var(--border);
	}
	.code-content {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.2s ease-in-out;
	}
	.code-content.isActive {
		grid-template-rows: 1fr;
	}
	.code-content__container {
		margin: 0;
		overflow: hidden;
	}
	.code-content__foot {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 38px;
	}
	.hight-code {
		margin: 0;
		overflow: hidden;
		padding: 2px;
		background-color: var(--color-page);
		border-top: var(--border);
		border-bottom: var(--border);
	}
	.code-block {
		overflow-y: hidden;
		overflow-x: auto;
		padding: 16px;
		&:hover::-webkit-scrollbar-thumb {
			background-color: var(--color-info-400);
		}
		&:hover::-webkit-scrollbar-thumb:hover {
			background-color: var(--color-info-500);
		}
	}
	.code-block::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	.code-block::-webkit-scrollbar-track {
		background-color: transparent;
	}
	.code-block::-webkit-scrollbar-thumb {
		background-color: transparent;
		border-radius: 4px;
		transition: background-color 0.2s ease;
	}
	.code-block::-webkit-scrollbar-corner {
		background-color: transparent;
	}
</style>
